<template>
  <div class="lyrics-detail">
    <div class="lyrics-detail_cover">
      <div class="lyrics-detail_cover_mask"></div>
      <img :src="currentMusic?.picUrl" alt="" />
    </div>
    <div class="lyrics-detail_content">
      <div class="lyrics-detail_content_info">
        <div class="title">{{ currentMusic?.name }}</div>
        <div class="author">{{ currentMusic?.singer }}</div>
      </div>
      <div class="lyrics-detail_content_lyrics">
        <div
          class="lyrics_scroll"
          :style="scrollStyle"
          @touchmove="handleTouchMove"
          @touchstart="handleTouchStart"
          @touchend="handleTouchEnd"
        >
          <div
            ref="lyricsItemRef"
            :class="['lyrics-item', index === currentIndex ? 'lyrics-item_active' : '']"
            v-for="(item, index) in currentMusic?.LyricList"
            :key="index"
          >
            <p>{{ item.text }}</p>
            <p :style="{ display: item.c_text ? '' : 'none' }">{{ item.c_text }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed, toRefs, type CSSProperties } from "vue";
import usePlayerStore from "@/store/playerStore";

const { currentMusic, currentLyric } = toRefs(usePlayerStore());

const lyricsItemRef = ref<HTMLElement>();

const moveState = reactive({
  offset: 0,
  startY: 0,
  endY: 0,
  isTouch: false,
});
const currentIndex = computed(() => currentLyric.value.index),
  currentHeight = computed(() => (currentLyric.value.c_text ? 60 : 38)),
  scrollStyle = computed(
    () =>
      ({
        transform: `translate3d(0, ${moveState.offset - currentIndex.value * currentHeight.value}px, 0)`,
        transition: !moveState.isTouch ? "all 0.3s" : "",
        transitionTimingFunction: "cubic-bezier(0.165, 0.84, 0.44, 1)",
      } as CSSProperties)
  );

watch(
  () => currentIndex.value,
  () => {
    moveState.offset = moveState.endY = 0;
  }
);

const handleTouchStart = (e: TouchEvent) => {
  moveState.isTouch = true;
  const { clientY } = e.touches[0];
  moveState.startY = clientY;
};
const handleTouchMove = (e: TouchEvent) => {
  const { clientY } = e.touches[0];
  moveState.offset = moveState.endY + Math.floor(clientY - moveState.startY);
};

const handleTouchEnd = (e: TouchEvent) => {
  moveState.isTouch = false;
  moveState.endY = Math.floor(moveState.offset);
};
</script>

<style scoped lang="scss">
.lyrics-detail {
  position: relative;
  padding: 30px;
  display: flex;
  height: 100%;
  flex-direction: column;
  color: #fff;
  &_cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    &_mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.2);
    }
    img {
      width: 100%;
      height: 100%;
      filter: blur(18px);
    }
  }
  &_content {
    &_info {
      font-size: 18px;
      margin-bottom: 20px;
      .title {
        font-size: 20px;
        margin-bottom: 10px;
        font-weight: 700;
      }
    }
    &_lyrics {
      width: 100%;
      height: 67vh;
      overflow: hidden;
      padding-top: 100px;
      .lyrics-item {
        padding: 10px 0;
        transition: all 0.3s;
        font-size: 18px;
        p {
          margin: 0;
        }
        p:last-child {
          font-size: 16px;
        }
        &_active {
          color: var(--font-active-color);
        }
      }
    }
  }
}
</style>
